<template>
	<view>
		<!-- 渲染 -->
		<image :src="item.image" mode="" style="width: 100%;"></image>
		<view class="title">{{item.title}}</view>
		<view class="price">{{item.price}}</view>
		<button type="primary" @click="show=true">立即购买</button>
		
		
		<!-- 弹框 -->
		<view class="mask" v-if="show">
			<view class="content">
				<image :src="item.image" mode="" style="width: 100%;"></image>
				<view class="title">{{item.title}}</view>
				<view class="price">{{item.price}}</view>
				<button type="primary" @click="toOrder(item)">确定购买</button>
			</view>
		</view>
	</view>
	
	
</template>

<script setup>
	import { onLoad } from '@dcloudio/uni-app'
	import { ref } from 'vue';
	const item = ref({})
	const show = ref(false)
		
	const toOrder = (item) => {
		uni.navigateTo({
			url: `/pages/order/order?id=${item.id}&title=${item.title}&price=${item.price}
			&image=${item.image}`
		})
	}
	
	// 获取查询参数
	onLoad(options => {
		console.log(options)
		// 动态标题
		uni.setNavigationBarTitle({
			title: options.title
		})
		// 保存数据
		item.value = options
	})
</script>

<style lang="scss">
.mask {
	position: fixed;
	top: 0%;
	left: 0%;
	height: 100vh;
	width: 100vw;
	background-color: rgba(0, 0, 0, .6);
	.content {
		width: 100%;
		position: absolute;
		bottom: 0;
		background-color: white;
	}
}
</style>
